Passing {{raw}} variable to snippet - Shopify

Question

I have created a simple AJAX request which feeds back to the header template. However, I can not seem to be able to do any of the following assign, capture, render, include.

<script id="CartPopover" type="text/x-handlebars-template">
      {% raw %}
       {{#items}}
        {% render "cart-item", item: item %}
       {{/items}}
      {% endraw %}
    </div>

Update

I am attempting to update the sliding side cart on the website when a product is added to cart. Please see the ajax, /cart/add.js success

function below.
var showCartNotificationPopup = function (product) {

        var addedQuantity = parseInt($('.quantity__input', this.$container).val());

        $.get("/cart.json", function (data) {
         var cart_items = data.items

          $.each(cart_items, function (index, item) {
            item.minus_quatinty = item.quantity - 1;
            item.formatPrice = Shopify.formatMoney(item.final_price)
          })

          cart = {
            items: data.items
          }

          $("#side-cart-container").find(".item").detach();
          $("#CartOuter table tbody").prepend(template(cart));
          console.log(cart);
          $("#side-cart-container").addClass("visible");
        });

        clearTimeout(popoverTimer);
      }

The {% raw %} tag is used to prevent Liquid rendering. Would you provide more info about what you are trying to achieve? — Alice Girard
@AliceGirard Hello Alice, thank you for commenting, I have updated my question above. But basically I am trying to update the Cart object within Shopify when a product is added. Therefore my logic was going to be as follows, product successfully added -> refetch the cart -> reuse the cart item snippet to reformat add back to the slide-out cart. — Matt Hammond

David Lazar David Lazar · Accepted Answer · 2020-07-06T13:15:39

You are misunderstanding how Shopify works. Liquid code is parsed once by Shopify when a page is loaded. Shopify creates a huge string of HTML, CSS and JS and dumps it into the browser.

Once you are in the land of Javascript, you no longer play with Liquid. Instead, you play with data. So, if you want to update the cart, you use Javascript. If you want to know what is in the cart, you use Javascript. If you want to re-render the contents of the cart, you replace the DOM you no longer like with new DOM. Use Javascript templates for this.

No amount of Liquid in your JS will help you except during render time. At render time, you can certainly build and fill a Javascript data structure with data from Liquid.

Passing {{raw}} variable to snippet - Shopify

1 Answers