Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Vue.js Server Side Render Theme Rate Topic   - - - - -

 
  • natewallis
  • Senior Member
  • Members
  • Join Date: 11-Jan 13
  • 184 posts

Posted 26 July 2019 - 12:40 AM #1

Hi, 

 

Would just like to share my experiences with you and let you know what I have managed to get a vue.js server side rendered theme up and running with CS-CART.   I haven't fully tested everything yet, but early indications are good.

 

I went with SSR to tackle any doubt around SEO that exists with client side rendering and so far I am happy with the results. 

 

We have 2 vue components on our page that contain session cart data, so hopefully I can cache everything on my pages with varnish except for these 2 components (using ESI) and of course we will not cache the checkout.   

 

Of course my theme is heavily domain specific to our business, but that is one of the reasons we went the route of writing our own theme, we have greatly simplified the smarty templates for our site and replaced them with something that can be managed with webpack.   It makes updates to the theme very quick.   All of the content for our theme is controlled by a single addon that only executes for allowed storefronts - this way our manipulation of data does not corrupt any other storefronts we may run with a different theme. 

 

We had to manipulate data to some degree to always deal with JSON responses to the front end, and we managed to do all of this using the existing cscart code hooks. 

 

Fingers crossed for successful deployment!

 

 

 



 
  • soft-solid
  • Junior Member
  • Members
  • Join Date: 19-Apr 10
  • 756 posts

Posted 26 July 2019 - 12:14 PM #2

Hello

 

Can you give an www address where you can see the effect?

 

Best regards

Robert


Team of SoftSolid
cs-cart.pl

 
  • natewallis
  • Senior Member
  • Members
  • Join Date: 11-Jan 13
  • 184 posts

Posted 09 August 2019 - 06:24 AM #3

Not at the moment, but it will be live soon.... basically the process I came up with was:

 

- Create new theme folder

- Create package.json in new theme folder

- Developed inside theme folder the entry points for the application just as you would any other webpack based project... 

 

When it came to SSR, I ended up hooking into:

 

dispatch_before_display

 

At this point:

 

I could grab the root template used by CS-CART and use that as a template for SSR

I server rendered my application using node and custom script that was based off a lot of the docs available on https://ssr.vuejs.org/

It needed a few tweaks to make it more relevant to CS-CART. 

 

I am currently doing final testing on browserstack, but I can share my config in more detail when I have finished...  so far, so good...