CODEWITHSUNDEEP
shopifyliquid
Matt Hammond
Matt Hammond

Reputation: 785

Passing {{raw}} variable to snippet - Shopify

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);
      }

Upvotes: 0

Views: 2023

Answers (1)

David Lazar
David Lazar

Reputation: 11427

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.

Upvotes: 2

Related Questions