enviar plantillas a env.js

_layouts/payment.html

@@ -16,6 +16,6 @@ layout: default
     data-controller="cart-payment-methods"
     data-cart-payment-methods-next-url="{{ site.confirmation.url }}"
     data-cart-payment-methods-back-url="{{ site.shipment.url }}"
-    data-cart-payment-methods-template="assets/templates/payment_methods.html">
+    data-cart-payment-methods-template="payment_methods">
   </div>
 </section>

_packs/controllers/cart_confirmation_controller.js

@@ -12,7 +12,6 @@ export default class extends CartBaseController {
     if (!this.template) return
 
     if (this.storage.cart) {
-
       const order = this.cart.data.attributes
       const products = this.products
       const site = await this.site()
@@ -29,16 +28,14 @@ export default class extends CartBaseController {
   }
 
   render (data = {}) {
-    fetch(this.template).then(r => r.text()).then(template => {
-      this.engine.parseAndRender(template, data).then(html => this.orderTarget.innerHTML = html)
-    })
-  }
-
-  get template () {
-    return this.element.dataset.template
+    this.engine.parseAndRender(this.template, data).then(html => this.orderTarget.innerHTML = html)
   }
 
   get clear () {
     return this.element.dataset.clear
   }
+
+  get template () {
+    return window.templates[this.element.dataset.template]
+  }
 }

_packs/controllers/cart_payment_methods_controller.js

@@ -25,8 +25,7 @@ export default class extends CartBaseController {
   }
 
   async render (data = {}) {
-    const request = await fetch(this.data.get('template'))
-    const template = await request.text()
+    const template = window.templates[this.data.get('template')]
 
     this.element.innerHTML = await this.engine.parseAndRender(template, data)
 

_packs/controllers/cart_shipping_controller.js

@@ -102,8 +102,7 @@ export default class extends CartBaseController {
   }
 
   async render (data = {}) {
-    const request = await fetch(this.data.get('template'))
-    const template = await request.text()
+    const template = window.templates[this.data.get('template')]
 
     this.methodsTarget.innerHTML = await this.engine.parseAndRender(template, data)
     this.ratesTarget.addEventListener('formdata', event => this.processShippingRate(event.formData))

_packs/controllers/notification_controller.js

@@ -24,15 +24,6 @@ export default class extends Controller {
     this.show()
   }
 
-  /*
-   * Gets the template path from a name
-   *
-   * @return [String]
-   */
-  template (name) {
-    return this.data.get('templates') + name + '.html'
-  }
-
   /*
    * Shows the notification
    */

_packs/controllers/order_controller.js

@@ -43,9 +43,9 @@ export default class extends CartBaseController {
    * Download the item template and render the order
    */
   render (data = {}) {
-    fetch(this.data.get('itemTemplate')).then(r => r.text()).then(template => {
-      this.engine.parseAndRender(template, data).then(html => this.cartTarget.innerHTML = html)
-    })
+    const template = window.templates[this.data.get('itemTemplate')]
+
+    this.engine.parseAndRender(template, data).then(html => this.cartTarget.innerHTML = html)
   }
 
   /*

assets/templates/cart.html

@@ -1,3 +1,4 @@
+{%- raw -%}
 {% for product in products %}
   <div
     class="border-bottom row no-gutters align-items-center justify-content-center mb-3 mb-md-0 pb-3 pb-md-0"
@@ -63,3 +64,4 @@
     </div>
   </div>
 {% endfor %}
+{%- endraw -%}

assets/templates/payment_methods.html

@@ -1,3 +1,4 @@
+{%- raw -%}
 <form id="coupon" data-controller="cart-coupon" data-action="cart-coupon#apply"></form>
 
 <form
@@ -60,3 +61,4 @@
     </div>
   </div>
 </form>
+{%- endraw -%}

assets/templates/recover_order.html

@@ -1,3 +1,4 @@
+{%- raw -%}
 <div class="alert alert-{{ type }} alert-dismissible" role="alert" data-controller="cart">
   {{ content }}
 
@@ -9,3 +10,4 @@
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
+{%- endraw -%}

assets/templates/shipping_methods.html

@@ -1,3 +1,4 @@
+{%- raw -%}
 <form
   data-action="cart-shipping#payment"
   data-target="cart-shipping.rates">
@@ -34,3 +35,4 @@
     </div>
   </div>
 </form>
+{%- endraw -%}

env.js

@@ -23,8 +23,16 @@ window.site = {
 {%- endcomment -%}
 {%- capture alert %}{% include_relative assets/templates/alert.html %}{% endcapture -%}
 {%- capture results %}{% include_relative assets/templates/results.html %}{% endcapture -%}
+{%- capture cart %}{% include_relative assets/templates/cart.html %}{% endcapture -%}
+{%- capture payment_methods %}{% include_relative assets/templates/payment_methods.html %}{% endcapture -%}
+{%- capture recover_order %}{% include_relative assets/templates/recover_order.html %}{% endcapture -%}
+{%- capture shipping_methods %}{% include_relative assets/templates/shipping_methods.html %}{% endcapture -%}
 
 window.templates = {
   "alert": {{ alert | jsonify }},
   "results": {{ results | jsonify }},
+  "cart": {{ cart | jsonify }},
+  "payment_methods": {{ payment_methods | jsonify }},
+  "recover_order": {{ recover_order | jsonify }},
+  "shipping_methods": {{ shipping_methods | jsonify }},
 }