store development by using Spartacus for front-end, - spartacus-storefront

I am a beginner to Spartacus so I have a few queries in my mind.
Kindly validate my understanding so far with respect to spartacus:
I believe, Spartacus framework will expect all CMS component from SAP Commerce. Once spartacus receive a component from SAP Commerce then it can be customized as per need
I have setup the sparatcus storefront and it's up and running. I have followed the steps mentioned in documentation, but now coming to my customization/implementation of my storefront from complete scratch like header/footer banner etc component needs to be created. So how can I go and which files need to be updated? I mean can this be done from SAP Commerce side first (Component) then Applying CSS and JS can done in Spartacus side?

These are brought questions, and not easy to answer with short answers. A few pointers:
Not necessarily. You can adapt other CMS systems, or customise partially regardless of the CMS.
You can customise CSS, customise CMC components, use outlets to amend existing DOM, etc.

Related

Spartacus 3.3 - Best approach to start customizing pages and components

I have good knowledge of Angular but I am new to Spartacus storefront.
At the moment I have read a lot of documentation and watched many video tutorials but I have not yet understood how to start customizing pages and components: the documentation is unclear and other resources found are often out of date.
How can I understand from the CMS which is the Home page? And what are the components that build it? How can I customize them?
Can anyone tell me what is the best approach to start customizing the header, footer and content based on the sketches I need to replicate? Where do I find a step by step guide that helps me do this?
Thanks in advance for your help.
P.S. Locally I have a default B2C multisite installation (Appareal and Electronics) with our backend as baseSite.
Try joining the Spartacus courses SAP is giving, it will give you a good start on how to work with the CMS. They are free and hold value for beginners.
Using the CmsService you can get the currentPage and based on the UID you can determine if you are on the homepage.
You can override components by creating Angular components and creating an override based on the class or flexType https://sap.github.io/spartacus-docs/customizing-cms-components/
If you are new to Angular I really recommend doing a deep-dive on this first otherwise Spartacus will be very confusing. Been there...

How can I use Vue.js to make a MPA? (Or should this project be a SPA?)

I have just picked up Vue and am trying to figure out the best way to structure this project.
Requirements:
A basic MPA (traditional site) with about 6 pages. This will be static info.
There will need to be a login section where customer will transmit data via form. Payment will happen here as well so will need to be secure.
My question is how should I be using Vue here? (I've already used VueCLI to scaffold out the project)
Should I:
A) use it for some components (Navbar, buttons, forms, etc) and keep structure traditional? How would i build out the User Dashboard to submit form info in this case - just as a new page?
B) or should I build this whole site as a SPA and have the new 'page' info loaded in on click? This would be easier for the login section?
One thing that may be clear on reading this is I don't understand well how the site will recognize users and deal with logins. Would this be easier if it were structured as a SPA? (more secure?)
(Also, I'm using this site to teach myself front-end development, specifically would like to learn more about building SPAs - so I realize I could use a web editor or easier solutions, but want to learn how to do a lot of this from 'scratch')
From what you've described it is entirely up to you. Both SPA or MPA would work fine and either would be totally reasonable given the requirements.
Have you worked with Vue-router before? SPAs don't need to appear as a single page to the user. They can still function as an MPA with different routes, page files, permissions, etc.
If you are hoping to use this project to teach yourself front-end web dev and know you have a particular interest in learning about SPAs, I think that is your answer.
I would go with an SPA and set up vue-router to manage your routes, and pages.

Is it possible to create simple frontend for use with Virtocommerce without writing liquid pages

I am evaluating Virtocommerce for a small startup company. We only have a few products and would like to make use of VC's user and payment modules instead of creating a website ourselves from scratch. We are familiar with asp.net mvc, angularjs and RestAPI. However, we would rather not learn and use the liquid theme engine if all possible.
So the question is, is it possible/a good idea to simply create a angularjs web app and call storefront's RestAPI? Please advice. Thanks.
Yes, of course, it is possible, you even can exclude VirtoCommerce.LiquidThemeEngine project from storefront solution and use ASP.NET razor views for the rendering SEO critical pages and use client SPA for another kind of presentation logic.
We have some clients who use this kind of storefront implementation (without Liquid themes) but unfortunately, I couldn't provide any of these examples because they aren't in a public access.
If you will have more questions you might ask them in our community chat gitter VirtoCommerce/vc-platform

Shopify Theme and ScriptTags

I'm new to Shopify app development and am a little confused with regards to the difference between ScriptTags and the Embedded App SDK.
My understanding, which might be incorrect, is that ScriptTags are best used to add functionality to the store front and that the Embedded App SDK basically allows you to integrate the administration portion of an app in the site merchant admin section. Is this correct?
Furthermore, if my app was to display an interface (i.e. a dialog with some options) to users via a ScriptTag is there anyway to integrate it into the site theme? Or would I simply add my theming, either dynamically via JS (potentially allowing merchants to edit default settings via the admin) or by loading an external CSS file via the ScriptTag (or both, I guess)?
Regardless of which approach taken, there is always the possibility that the site CSS could interfere or negatively impact the app-generated content. Is it common / best practice to reset the CSS used in a custom interface?
I am not sure I have understood your question clearly.
But I think you are referring this.
https://help.shopify.com/api/reference/scripttag
1) You can't create a new page with the scripttag in Shopify.
2) You can't save any data with the scripttag within Shopify.
You can submit your customized form, but Shopify can't accept and process that form.
Because the scripttag represents javascript and the javascript is only for client side programming.
I hope this could help.

Bigcommerce - Implementing custom code that runs on server-side to create multiple versions of page for a product?

I'm new to Bigcommerce but experienced with web app development. I have a need to make customizations to a Bigcommerce store where I need to implement custom logic that runs on the server-side which affects the output in the UI by deciding which page to serve. For example, I want to have different versions of a product page for different locations. I want each version to have a static URL, however, for SEO purposes. I need to implement logic in the server-side to do something like detect user location based on IP and then determine which of the product version pages to serve. I realize I can do this with JavaScript but I don't want to as I don't think that would work as well for SEO.
I have looked over their API and templating briefly but am not seeing a real way that this is possible. Wondering if anyone can guide me in the right direction or is Bigcommerce too simplified to allow this sort of customization?
You do not have server side access on Bigcommerce. The only would to do this would be client side with javascript.