syed1214

Hi.. 

 

I am developing a new theme for our storefront using vue.js and SASS for frontend components and brunch as the build system.. Thought I would keep people posted in case anyone else is doing something similar. 

 

I have my configuration setup pretty nicely now.   And I am confident that it will at least result in an operational website with scoped modules, simpler TPL files and a much more clearly defined components with single responsibility. 

 

I have not had to modify any core controllers and my original TPL files become a simple portal into vue.js land.  E.g. my views/checkout/checkout.tpl file now looks like this

 

<checkout :cart="{$cart|json_encode}"></checkout>

 

And my checkout component looks like this (bootstrap 4.1 is part of my setup):

 

<template>

  <div class="row">

    <div class="col-12 offset-2">

      <div class="row">

        <div class="col-12">

          <step-one class="mb-4"></step-one>

          <step-two class="mb-4"></step-two>

          <step-three></step-three>

        </div>

        <div class="col-4">

          <order-summary></order-summary>

          <products-in-order></products-in-order>

          <shipping-summary></shipping-summary>

        </div>

      </div>

    </div>

  </div>

</template>

 

Of course I have other vue.js components "step-one" that all do their job... so far so good. 

 

Other considerations I am making are:

 

- What to do with core CS-CART modules.   E.g. "core.js" ... Since the original CS-CART javascript is not modular, it makes it a little trickier to figure out how to get the core CS-CART javascript into my theme.   For now, I haven't included it at all as part of me is thinking that I might just roll my own functions to hook into CS-CART...but I have to trade this off against any headaches I might encounter when it comes time to upgrade CS-CART.    I am currently steering in the direction of rolling my own (using axios library to make calls) as we don't have a lot of backend AJAX calls from our front end and I think I will end up with a smaller library this way.

 

- I am using brunch as my build system and of course webpack would work nicely too.  This is just personal prefernce as I always struggled to get a clean setup with webpack and always found it hard to come back to my config files later on and figure out why I was doing what..   Our requirements are quite simple, so brunch hasn't fallen short yet.

 

Benefits I have noticed:

 

- Loading time of theme.  Previously we have used a store bought theme and these themes come with a lot of baggage that you don't always use.  By developing our own cut down theme, site load times are much faster

 

- Cleaner template files and much more self explanatory components.  I am not sure about you, but I always found Smarty template files (no matter what syntax highlighter you have enabled) hard to read.  This is no longer the case

 

What do you think?  Anyone else been down this path and hit any roadblocks after the honeymoon period?  i would be interested to hear your thoughts. 

 

Either way, I hope that the CS-CART team will start to integrate more contemporary best practice javascript loading future releases of CS-CART.  The core CSCART javascript is doing the job, but surely at some point it is going to be difficult to maintain... 

 

Cheers... Apologies for any typos / grammar errors in this post.  I better get back to work!

Have you completed integrating vuejs in cs cart checkout? We also want to integrate vuejs with our cs cart store. can you help in this?