Home > OS >  Shopify Liquid Switch Statement Half Working...?
Shopify Liquid Switch Statement Half Working...?

Time:10-30

Thanks to Description

CodePudding user response:

So after many attempts at using case, I decided to try an alternative method - and it worked! It isn't too much longer, but here it is.

<!-- snippets/icon.liquid -->
<div >
  <svg xmlns="http://www.w3.org/2000/svg" {%- if icon != blank %}aria-label="{{- icon | strip | strip_newlines -}}"{% endif %} width="{{ size | default: 128 }}" height="{{ size | default: 128 }}" x="0" y="0" viewBox="0 0 128 128">
    {%- if icon contains 'fabric' -%}
      <g><path clip-rule="evenodd" d="m40.3566 22.3591c13.4123-9.346 28.6444-9.1866 37.0576-.7744l.0183.0186 38.0005 39.001c.026.0271.051.0549.076.0834 3.99 4.5877 7.934 16.7303-3.443 31.0561-11.099 13.9762-25.2466 12.6482-31.7294 9.8782-.6984-.298-1.2756-.733-1.7414-1.204l-40.7343-41.2137c-1.2041-1.2183-1.9027-2.966-1.6436-4.7993 1.3849-9.7968 7.2939-17.0397 13.8077-20.8001 3.2531-1.878 6.739-2.9351 9.9719-2.9446 3.2474-.0096 6.3448 1.0501 8.5083 3.5226 2.2386 2.5584 2.6604 5.5605 1.9955 8.3644-.6461 2.7248-2.3038 5.2654-4.2498 7.2798-1.9487 2.017-4.3395 3.6655-6.66 4.5001-2.2111.7953-5.0394 1.0527-7.0052-.913-1.1793-1.1794-1.8525-2.5197-2.0727-3.9289-.2162-1.3832.0234-2.7016.4506-3.8468.8365-2.2427 2.4958-4.1088 3.7445-5.1654.8432-.7134 2.1051-.6083 2.8186.2349.7135.8433.6083 2.1052-.2349 2.8187-.918.7768-2.0587 2.1107-2.5805 3.5097-.252.6756-.3311 1.2885-.2463 1.8312.0808.5169.3285 1.0975.9492 1.7181.2842.2843 1.0809.6041 2.8229-.0224 1.6327-.5873 3.5232-1.845 5.137-3.5155 1.6164-1.6731 2.8025-3.6013 3.2346-5.4234.4133-1.743.1476-3.3659-1.1138-4.8075-1.2262-1.4013-3.1011-2.1637-5.4862-2.1567-2.3997.0071-5.2065.8055-7.9838 2.4089-5.5471 3.2023-10.6497 9.4257-11.8469 17.8957-.0655.4629.1017.9965.5278 1.4276l40.7343 41.2137c.1727.1747.3313.2795.4681.338 5.2288 2.2339 17.2985 3.5609 27.0258-8.6878 10.179-12.8186 6.268-22.7786 3.592-25.9036l-37.9491-38.9484c-6.5896-6.5779-19.5211-7.4127-31.9334 1.2366-15.1335 10.5455-21.6087 25.9053-27.3802 41.6228-.2687.7317-.082 1.5577.4825 2.108l35.7093 34.8163c.0022.002.0039.004.0051.005.0059.001.0234.002.0506-.005.0314-.008.0588-.023.0776-.04.0153-.013.0271-.029.0361-.055 1.7117-4.9295 4.9881-12.3799 9.519-16.5622.8116-.7492 2.0769-.6986 2.8261.113s.6986 2.077-.113 2.8262c-3.7483 3.46-6.7654 10.074-8.4534 14.935-.9493 2.734-4.5286 3.804-6.7405 1.647l-35.7093-34.8163c-1.6873-1.6451-2.2602-4.1305-1.4449-6.3508 5.7772-15.7332 12.595-32.2002 28.8481-43.5258z" fill-rule="evenodd" data-original="#000000" ></path></g>
    {%- elsif icon contains 'haberdashery' -%}
      <g><g><path d="m89.6437 15.2722c5.627-4.7957 13.9943-4.4625 19.2223.7654 1.659 1.6585 1.556 4.3775-.223 5.906l-33.8397 29.0732c-.8378.7199-2.1005.6242-2.8203-.2136s-.6242-2.1005.2137-2.8204l33.8393-29.0733c.004-.0035.006-.0063.006-.0063l.002-.0022c.001-.0018.002-.0063.002-.0129.001-.0066-.001-.0111-.001-.013l-.001-.0023s-.002-.0029-.006-.0068c-3.753-3.753-9.7602-3.9922-13.7997-.5494l-35.441 30.2054c-.8407.7165-2.103.6158-2.8195-.2249-.7165-.8406-.6158-2.1029.2249-2.8194z" data-original="#000000" ></path><path d="m55.5 61.9998c-1.1046 0-2 .8955-2 2 0 1.1046.8954 2 2 2h1.5c1.1046 0 2-.8954 2-2 0-1.1045-.8954-2-2-2z" data-original="#000000" ></path><path clip-rule="evenodd" d="m21.5 38.4998c-2.9221 0-6.2483 1.0103-8.8797 3.13-2.68608 2.1639-4.6203 5.4711-4.6203 9.87 0 6.2894 4.0493 10.2061 6.6954 11.7999.8919.5373 1.8542.7001 2.6831.7001h25.748c.5936 0 1.1565.2637 1.5364.7197l.3284.394-25.5331 24.0087c-4.5981 4.3236-4.9743 11.5018-.8531 16.2828 4.2456 4.925 11.6777 5.481 16.6092 1.243l18.8636-16.2109c3.9726-3.4139 4.2019-9.4859.4981-13.1897l-.1618-.1618c-.781-.781-2.0474-.781-2.8284 0-.7811.7811-.7811 2.0474 0 2.8285l.1618.1617c2.0576 2.0577 1.9302 5.431-.2767 7.3277l-18.8636 16.2105c-3.2579 2.8-8.1678 2.433-10.9726-.821-2.7225-3.1581-2.474-7.9004.5636-10.7567l25.3583-23.8444 2.2076 2.6491c1.1399 1.3679 2.8286 2.1588 4.6093 2.1588h51.1265c7.732 0 14-6.268 14-14 0-2.2091-1.791-4-4-4h-56.6045c-.5998 0-1.168-.2692-1.5479-.7335l-2.0994-2.5659c-1.1387-1.3918-2.8405-2.2006-4.6414-2.2006h-13.1074c-.9877 0-2.1363-.8906-2.7015-2.5761-2.2064-6.58-8.8388-8.4239-13.2979-8.4239zm-9.5 13c0-3.101 1.3158-5.2938 3.1297-6.7549 1.8686-1.5053 4.2924-2.2451 6.3703-2.2451 3.7856 0 8.117 1.555 9.5054 5.6956.8395 2.5036 3.0635 5.3044 6.494 5.3044h13.1074c.5986 0 1.1649.2683 1.5456.7336l2.0994 2.5659c1.1395 1.3928 2.8441 2.2005 4.6437 2.2005h56.6045c0 5.5229-4.477 10-10 10h-51.1265c-.5936 0-1.1565-.2636-1.5364-.7196l-5.1013-6.1215c-1.1399-1.3679-2.8286-2.1589-4.6093-2.1589h-25.748c-.3286 0-.5196-.0665-.6193-.1265-1.9189-1.1558-4.7592-3.9636-4.7592-8.3735z" fill-rule="evenodd" data-original="#000000" ></path></g></g>
    {%- elsif icon contains 'patternsbooks' -%}
      <g><g><path d="m53.6807 29.9089c-.494-.7585-1.4358-1.0907-2.2964-.8099l-3.2203 1.0508c-1.0501.3427-1.6236 1.4717-1.2809 2.5218.3426 1.0501 1.4717 1.6235 2.5217 1.2809l1.8665-.6091c.5148.6066 1.1427 1.25 1.8728 1.8825.8348.7233 2.0979.6328 2.8212-.202s.6329-2.0979-.202-2.8212c-1.013-.8777-1.7138-1.7275-2.0826-2.2938z" data-original="#000000"></path><path d="m77.6157 29.099c-.8606-.2808-1.8024.0514-2.2964.8099-.3688.5663-1.0696 1.4161-2.0826 2.2938-.8349.7233-.9253 1.9864-.202 2.8212s1.9864.9253 2.8212.202c.7301-.6325 1.358-1.2759 1.8728-1.8825l1.8665.6091c1.05.3426 2.1791-.2308 2.5217-1.2809.3427-1.0501-.2308-2.1791-1.2809-2.5218z" data-original="#000000"></path><path d="m42.9641 36.0542c1.0501-.3427 1.6236-1.4717 1.2809-2.5218-.3426-1.0501-1.4717-1.6236-2.5217-1.2809l-3.2204 1.0508c-.8049.2627-1.5794.5962-2.3152.994-.9717.5253-1.3335 1.7389-.8082 2.7105.5254.9717 1.7389 1.3335 2.7106.8082.5255-.2842 1.0786-.5223 1.6537-.71z" data-original="#000000"></path><path d="m87.2767 32.2515c-1.05-.3427-2.1791.2308-2.5217 1.2809-.3427 1.0501.2308 2.1791 1.2809 2.5218l3.2203 1.0508c.5751.1877 1.1282.4258 1.6537.71.9717.5253 2.1852.1635 2.7106-.8082.5253-.9716.1635-2.1852-.8082-2.7105-.7358-.3978-1.5103-.7313-2.3152-.994z" data-original="#000000"></path><path d="m68.6303 39.0709c1.0694-.2765 1.7121-1.3676 1.4356-2.437s-1.3675-1.7122-2.4369-1.4357c-.9701.2509-2.0144.3978-3.129.3978s-2.1589-.1469-3.129-.3978c-1.0694-.2765-2.1604.3663-2.4369 1.4357s.3662 2.1605 1.4356 2.437c1.2797.3309 2.6604.5251 4.1303.5251s2.8506-.1942 4.1303-.5251z" data-original="#000000"></path><path d="m35.2933 40.0575c.7239-.8343.6345-2.0974-.1997-2.8214s-2.0974-.6346-2.8214.1997c-.5483.6318-1.042 1.3152-1.4734 2.0438l-2.255 3.809c-.5627.9505-.2483 2.1772.7022 2.7399s2.1772.2483 2.7399-.7022l2.2549-3.809c.3082-.5205.6609-1.0086 1.0525-1.4598z" data-original="#000000"></path><path d="m96.7278 37.4358c-.724-.8343-1.9872-.9237-2.8214-.1997s-.9236 1.9871-.1997 2.8214c.3916.4512.7443.9393 1.0525 1.4598l2.2549 3.809c.5627.9505 1.7894 1.2649 2.7399.7022.95-.5627 1.265-1.7894.702-2.7399l-2.2548-3.809c-.4313-.7286-.9251-1.412-1.4734-2.0438z" data-original="#000000"></path><path d="m27.476 52.9442c.5627-.9505.2483-2.1771-.7022-2.7398s-2.1772-.2484-2.7399.7021l-2.2549 3.809c-.309.5218-.3644 1.1556-.1509 1.7232.2136.5676.6731 1.0076 1.2495 1.1963l1.1958.3916c.4531.1484.9211.1261 1.3344-.0316.2399.3716.6041.6665 1.0572.8149l1.1959.3916c1.0497.3438 2.1793-.2285 2.5231-1.2782s-.2285-2.1794-1.2782-2.5231l-1.1959-.3917c-.4531-.1484-.9211-.1261-1.3344.0317-.024-.0372-.0492-.0736-.0757-.1092z" data-original="#000000"></path><path d="m104.966 50.9065c-.563-.9505-1.789-1.2648-2.74-.7021-.95.5627-1.265 1.7893-.702 2.7398l1.176 1.9868c-.026.0356-.052.072-.076.1092-.413-.1578-.881-.1801-1.334-.0317l-1.196.3917c-1.0495.3437-1.6218 1.4734-1.278 2.5231s1.473 1.622 2.523 1.2782l1.196-.3916c.453-.1484.817-.4433 1.057-.8149.413.1577.881.18 1.335.0316l1.195-.3916c.577-.1887 1.036-.6287 1.25-1.1963.213-.5676.158-1.2014-.151-1.7232z" data-original="#000000"></path><path d="m46 63.0003c0-1.1046-.8954-2-2-2s-2 .8954-2 2v3.3333c0 1.1046.8954 2 2 2s2-.8954 2-2z" data-original="#000000"></path><path d="m87 63.0003c0-1.1046-.8954-2-2-2s-2 .8954-2 2v3.3333c0 1.1046.8954 2 2 2s2-.8954 2-2z" data-original="#000000"></path><path d="m46 73.0003c0-1.1046-.8954-2-2-2s-2 .8954-2 2v6.6667c0 1.1045.8954 2 2 2s2-.8955 2-2z" data-original="#000000"></path><path d="m87 73.0003c0-1.1046-.8954-2-2-2s-2 .8954-2 2v6.6667c0 1.1045.8954 2 2 2s2-.8955 2-2z" data-original="#000000"></path><path d="m46 86.3336c0-1.1045-.8954-2-2-2s-2 .8955-2 2v6.6667c0 1.1046.8954 2 2 2s2-.8954 2-2z" data-original="#000000"></path><path d="m87 86.3336c0-1.1045-.8954-2-2-2s-2 .8955-2 2v6.6667c0 1.1046.8954 2 2 2s2-.8954 2-2z" data-original="#000000"></path><path d="m46 99.667c0-1.1046-.8954-2-2-2s-2 .8954-2 2v3.333c0 1.105.8954 2 2 2h3.4167c1.1045 0 2-.895 2-2 0-1.104-.8955-2-2-2h-1.4167z" data-original="#000000"></path><path d="m87 99.667c0-1.1046-.8954-2-2-2s-2 .8954-2 2v1.333h-1.4167c-1.1045 0-2 .896-2 2 0 1.105.8955 2 2 2h3.4167c1.1046 0 2-.895 2-2z" data-original="#000000"></path><path d="m54.25 101c-1.1046 0-2 .896-2 2 0 1.105.8954 2 2 2h6.8333c1.1046 0 2-.895 2-2 0-1.104-.8954-2-2-2z" data-original="#000000"></path><path d="m67.9167 101c-1.1046 0-2 .896-2 2 0 1.105.8954 2 2 2h6.8333c1.1046 0 2-.895 2-2 0-1.104-.8954-2-2-2z" data-original="#000000"></path><path clip-rule="evenodd" d="m78.7476 18.0365c.4825-.8773 1.5393-1.2626 2.4732-.9018l17.6684 6.8264c3.2518 1.2563 5.9178 3.6804 7.4768 6.7982l12.423 24.8466c.252.5035.28 1.0899.077 1.6151-.203.5251-.618.9405-1.143 1.144l-23.223 9.0049v44.6301h-60v-44.6301l-23.2231-9.0049c-.5249-.2035-.9397-.6189-1.1425-1.144-.20291-.5252-.17503-1.1116.0767-1.6151l12.4233-24.8466c1.5589-3.1178 4.2249-5.5419 7.4764-6.7982l17.6684-6.8264c.9339-.3608 1.9907.0245 2.4732.9018.7905 1.4372 2.5123 3.7202 5.001 5.6258 2.4723 1.8931 5.5979 3.338 9.2466 3.338s6.7743-1.4449 9.2466-3.338c2.4887-1.9056 4.2105-4.1886 5.001-5.6258zm11.7524 48.0105c-.0007-.0309-.0007-.0617 0-.0924v-9.9543c0-1.1046.8954-2 2-2s2 .8954 2 2v7.0794l19.729-7.6499-11.441-22.8816c-1.114-2.227-3.0179-3.9585-5.3404-4.8559l-16.1279-6.2312c-1.1633 1.6829-2.9004 3.6613-5.1413 5.3772-2.9693 2.2736-6.9271 4.162-11.6784 4.162s-8.7091-1.8884-11.6784-4.162c-2.2409-1.7159-3.978-3.6943-5.1413-5.3772l-16.1279 6.2312c-2.3225.8974-4.2268 2.6289-5.3403 4.8559l-11.4408 22.8816 19.7287 7.6499v-7.0794c0-1.1046.8954-2 2-2s2 .8954 2 2v9.9543c.0007.0307.0007.0615 0 .0924v41.953h52z" fill-rule="evenodd" data-original="#000000"></path></g></g>
    {%- elsif icon contains 'giftcards' -%}
      <g><g><g clip-rule="evenodd" fill-rule="evenodd"><path d="m20 75c0 .5523.4477 1 1 1h2c.5523 0 1 .4477 1 1v14c0 .5523.4477 1 1 1h36c.5523 0 1-.4477 1-1v-14c0-.5523.4477-1 1-1h2c.5523 0 1-.4477 1-1v-14c0-.5523-.4477-1-1-1h-44c-.5523 0-1 .4477-1 1zm5-11c-.5523 0-1 .4477-1 1v6c0 .5523.4477 1 1 1h2c.5523 0 1 .4477 1 1v14c0 .5523.4477 1 1 1h28c.5523 0 1-.4477 1-1v-14c0-.5523.4477-1 1-1h2c.5523 0 1-.4477 1-1v-6c0-.5523-.4477-1-1-1z" data-original="#000000" ></path><path d="m45 88v-24h-4v24zm4 4h-12v-32h12z" data-original="#000000" ></path><path d="m38.6777 52.0305c1.6851 2.493 2.357 6.6985 2.357 9.9925h4c0-3.5395-.6782-8.7339-3.0431-12.2326-1.2285-1.8176-3.0158-3.3189-5.4874-3.6989-2.4225-.3724-5.1076.3957-8.0352 2.239-.0358.0226-.0709.0463-.1053.0711-1.8313 1.3226-3.9833 4.1454-3.203 7.5327.7865 3.4142 4.2798 6.1709 10.8325 8.0139l1.083-3.8506c-6.2473-1.7571-7.754-3.917-8.0176-5.0611-.266-1.1549.458-2.5103 1.5991-3.3571 2.4414-1.5251 4.1261-1.8054 5.2387-1.6344 1.0721.1649 1.9849.8072 2.7813 1.9855z" data-original="#000000" ></path><path d="m47.357 52.0305c-1.6851 2.493-2.357 6.6985-2.357 9.9925h-4c0-3.5395.6781-8.7339 3.043-12.2326 1.2286-1.8176 3.0158-3.3189 5.4875-3.6989 2.4224-.3724 5.1075.3957 8.0351 2.239.0359.0226.071.0463.1054.0711 1.8313 1.3226 3.9832 4.1454 3.203 7.5327-.7865 3.4142-4.2798 6.1709-10.8325 8.0139l-1.083-3.8506c6.2473-1.7571 7.754-3.917 8.0175-5.0611.2661-1.1549-.4579-2.5103-1.599-3.3571-2.4414-1.5251-4.1261-1.8054-5.2387-1.6344-1.0721.1649-1.9849.8072-2.7813 1.9855z" data-original="#000000" ></path></g><path d="m17 30c-2.2091 0-4 1.7909-4 4v60c0 2.2091 1.7909 4 4 4h94c2.209 0 4-1.7909 4-4v-5.5l4 4v1.5c0 4.4183-3.582 8-8 8h-94c-4.4183 0-8-3.5817-8-8v-60c0-4.4183 3.5817-8 8-8h36.5l3.5 4z" data-original="#000000" ></path><path d="m115 34c0-2.2091-1.791-4-4-4h-39l-4-4h43c4.418 0 8 3.5817 8 8v43l-4-4z" data-original="#000000" ></path><path d="m66.8434 28h-9.7331l18.3733 18.5-.9834 4.6862-23.614-23.7769c-1.2532-1.2619-.3594-3.4093 1.4191-3.4093h15.3665c.5304 0 1.0391.2107 1.4142.5858l15.9142 15.9142-3 2.6569z" data-original="#000000" ></path><path d="m116 87.296v-10.1391l-15.157-15.1569 2.657-3 15.914 15.9142c.375.3751.586.8838.586 1.4142v15.8196c0 1.7851-2.161 2.676-3.419 1.4094l-23.8924-24.0574 4.8116-.8315z" data-original="#000000" ></path><path clip-rule="evenodd" d="m73.0002 49.373c0 .2652-.1053.5195-.2928.7071l-5.2132 5.2131c-.3905.3905-.3905 1.0237 0 1.4142l5.2132 5.2132c.1875.1875.2928.4418.2928.7071v7.3726c0 .5523.4478 1 1 1h7.3727c.2652 0 .5196.1054.7071.2929l5.2132 5.2132c.3905.3905 1.0237.3905 1.4142 0l5.2132-5.2132c.1876-.1875.4419-.2929.7071-.2929h7.3723c.553 0 1-.4477 1-1v-7.3725c0-.2652.106-.5196.293-.7071l5.213-5.2133c.391-.3905.391-1.0237 0-1.4142l-5.213-5.2133c-.187-.1875-.293-.4419-.293-.7071v-7.3725c0-.5523-.447-1-1-1h-7.3723c-.2652 0-.5195-.1053-.7071-.2929l-5.2132-5.2132c-.3905-.3905-1.0237-.3905-1.4142 0l-5.2132 5.2132c-.1875.1876-.4419.2929-.7071.2929h-7.3727c-.5522 0-1 .4477-1 1zm5-4.3727c-.5522 0-1 .4477-1 1v5.0295c0 .2652-.1053.5196-.2928.7071l-3.5563 3.5563c-.3906.3905-.3906 1.0237 0 1.4142l3.5563 3.5563c.1875.1875.2928.4419.2928.7071v5.0295c0 .5523.4478 1 1 1h5.0296c.2652 0 .5195.1054.7071.2929l3.5563 3.5564c.3905.3905 1.0237.3905 1.4142 0l3.5564-3.5564c.1875-.1875.4419-.2929.7071-.2929h5.0293c.5523 0 1-.4477 1-1v-5.0294c0-.2652.1054-.5195.2929-.7071l3.5569-3.5564c.39-.3905.39-1.0237 0-1.4142l-3.5569-3.5564c-.1875-.1875-.2929-.4419-.2929-.7071v-5.0294c0-.5523-.4477-1-1-1h-5.0293c-.2652 0-.5196-.1053-.7071-.2929l-3.5564-3.5563c-.3905-.3906-1.0237-.3906-1.4142 0l-3.5563 3.5563c-.1876.1876-.4419.2929-.7071.2929z" fill-rule="evenodd" data-original="#000000" ></path></g></g>
    {%- endif -%}
   </svg>
</div>

It seems to be the only way I have managed to make it work.

I am still curious as to whether using case is still possible, so if anyone has more information, it would be greatly appreciated!

EDIT: Streamlined the code as to not replicate the svg element multiple times.

CodePudding user response:

Your problem is solved by a simple technique of debugging. Use the common HTML comment to establish your test condition or case makes sense. I am pretty sure you will surprise yourself here. Here is that secret sauce:

<!-- Secret here >>> {{icon | strip | strip_newlines}} -->

You can run your code, and then search the generated source for Secret. When you see what the Liquid parse generated, you will have proof of the test conditions to use to test with in your case statements. That case/when test is exact whereas your if statement approach is loose, using contains.

Once you know why your test condition works loosely, maybe you'll see the pattern where you could flip back to using the more precise case.

  • Related