Shopify Script support

[bakura10]

Hi,

I don't have any Shopify Plus account, but I've seen that template can be modified to support Shopify Script (https://docs.shopify.com/manual/apps/apps-by-shopify/script-editor/update-liquid-templates-for-scripts).

Does CartJS supports everything?

[gavinballard]

@bakura10 Yes! The Cart object returned by Shopify's Ajax API includes details of line items that may have had their price affected by a script, for example:

{  
  token:"f8d966585b4692e87dc17f168360c483",
  note:null,
  attributes:{  

  },
  original_total_price:12300,
  total_price:7400,
  total_discount:4900,
  total_weight:1814,
  item_count:2,
  items:[  
    {  
      id:8288063941,
      properties:{  

      },
      quantity:1,
      variant_id:8288063941,
      key:"8288063941:8852395c2e56a2b7befb5127a98e216d",
      title:"The Brilla in Plum - XSmall - final sale",
      price:4900,
      line_price:0,
      original_line_price:4900,
      total_discount:4900,
      discounts:[  
        {  
          amount:4900,
          title:"$49 off everything in store!"
        }
      ],
      sku:"ETBPF151",
      grams:907,
      vendor:"evy's tree",
      product_id:2826648453,
      gift_card:false,
      url:"/products/the-brilla-in-plum?variant=8288063941",
      image:"https://cdn.shopify.com/s/files/1/1056/1026/products/RDS3461.jpeg?v=1447191179",
      handle:"the-brilla-in-plum",
      requires_shipping:true,
      product_type:"",
      product_title:"The Brilla in Plum",
      product_description: "Description.",
      variant_title:"XSmall - final sale",
      variant_options:[  
        "XSmall - final sale"
      ]
    },
    {  
      id:8288186821,
      properties:{  

      },
      quantity:1,
      variant_id:8288186821,
      key:"8288186821:cd56a919b1224a5710b16ba03bdaec29",
      title:"Layering Leaves Grey Smoke with Hood - 2X",
      price:7400,
      line_price:7400,
      original_line_price:7400,
      total_discount:0,
      discounts:[  

      ],
      sku:"ETLSF157",
      grams:907,
      vendor:"evy's tree",
      product_id:2826672965,
      gift_card:false,
      url:"/products/grey-smoke-layering-leaves-with-hood?variant=8288186821",
      image:"https://cdn.shopify.com/s/files/1/1056/1026/products/RDS4234.jpeg?v=1447191295",
      handle:"grey-smoke-layering-leaves-with-hood",
      requires_shipping:true,
      product_type:"",
      product_title:"Product title",
      product_description:"Et cetera...",
      variant_title:"2X",
      variant_options:[  
        "2X"
      ]
    }
  ],
  requires_shipping:true
}

Note the original_price and discount keys present for each line item. This just means you'd need to account for these attributes in your Rivets.js template.

I'll leave this issue open for now as a reminder to add something in to our documentation on this.

[bakura10]

Awesome. Yes please leave this open for now, I'll make sure to update our themes for that :). Thanks!!

[bakura10]

Just a note, it seems that Shopify doc is talking about a "message" property within a line_item (https://help.shopify.com/manual/apps/apps-by-shopify/script-editor/update-liquid-templates-for-scripts). However it seems to not be here in the Ajax API. Can you confirm?

[gavinballard]

@bakura10 Yes, that doesn't seem to be getting returned by the Ajax API, but the title property inside the discounts array for each line item contains the same value.

[bakura10]

I've emailed them. There is aussi the "original_price" that is missing in Ajax API (only the "original_line_price" is here).

[gavinballard]

OK, awesome.

[ryanwachtl]

Hello, wondering if there are any updates on full support for Shopify Script editor within the cart?

[gavinballard]

Hi @ryanwachtl - what sort of support do you mean? CartJS is capable of displaying anything returned to us by the Ajax API. Maybe if you can provide some details on your use case we can help you out.

[justinmetros]

Just FYI if anyone came here confused about the line_item.message liquid object and CartJs, gotta get it from the JSON object just like Gavin said. In rivets, rv-each-[prop] does the trick, i.e.

<div rv-each-discount="item.discounts">{discount.title}</div>

[gavinballard]

Thanks @justinmetros 👍