I have created a custom outlet and placed it in app.component.html
<app-outlet></app-outlet>
<cx-storefront>Loading...</cx-storefront>
The template app-outlet.component.html contains
<ng-template cxOutletRef="CustomOutletSlot" cxOutletPos="replace">
// this replace outlet works in storefront
</ng-template>
In storefront, the pages are loading as expected.
Sure, it also shows in SmartEdit, but the contextual menus Drag & Drop, Edit, and Remove are not showing?
Are there any workaround for this? I still need to use the custom outlet in my case.
SmartEdit is about managing CMS Components and Content Slots. It works against backend data structures supported by SAP Commerce: pages have content slots, and content slots contain components. When you modify via SmartEdit, you are updating the content slots, the components, and the relationships between them.
When you are using a custom outlet ... that is not a data item understood by the backend CMS functionality. There is no data element in the backend for SmartEdit to manipulate.
If you want to have this item manageable via SmartEdit - you will need to create and use CMS Content Slots / Components
Related
We created a custom footer layout which contains many slots :
The new footer is editable and working as expected on Staging environement, the contract added for all slots inside footer and we have possibility to edit, remove ... componenets.
On production, the footer is unstable, sometimes the contract is added only to the OOTB slot (FooterSlot), the blue overlay is missing for all other slots (custom Slots)
Note sur but I think the same issue happen for the custom Header.
Same Data (slots, componenets...) exists in boths environement (Staging & Production)
Additional Informations :
Spartacus shematics : 4.3.1
SAP commerce cloud 2005
SSR enabled
Any ideas why the FooterSlot is editable always while custom slots are not ediatble all time ?
Expected behavior :
all slots inside the custom footer are editable all time
From this Shopify article Integration with the theme editor, it said that:
When merchants customize sections, the HTML of those sections is dynamically added, removed, or re-rendered directly onto the existing DOM without reloading the entire page.
JavaScript that runs when the page loads will not run again when a section is re-rendered or added to the page. This poses a problem for any custom scripts that would need to be re-run.
I am trying to use Vue 3.x in Shopify theme sections. When a section setting is changed, the section variable is changed (like {{ section.settings.button_color }}. However, the js is not run again, how can I load this updated section value into Vue app?
I have a header on every page thats generally static — besides the button that needs to update based on the page. Ideally I would like to have a variable called link in static/content/xxx
and then to call it from layouts/default. However it does not seem that I have access to any of the variables in my static content. Being new to vue and nuxt I was hoping for some guidance. I tried using asyncData however, it doesn't seem to get called at all in my layout.
a layout is a static wrapper that will wrap your main content. the main idea behind using layout is to not write the same content again and again. If you work with Vue only project than this type of functionality can be accessed by the using the child routes.
just add the common layout as the parent Component and the changed or different content as the child components.
back to the point, if you have different button content depending upon the pages than don't place it in the layout instead pass through the components individually.
whereas the static folder in the nuxt application holds the data that should not be changed such as the css files or external script files just take and example of bootstrap and jquery these are the libraries that are embeded in the application, instead of changing their internals we just use them. this type of content is placed in static directory (folder)
I hope it helps
I made a popup component that dynamically loads a content component regardless of type.
After RC4 it is impossible to inject components without adding them to the entryComponents list.
Is it possible to load components without specifying them in entryComponents?
Is it possible to load all components into entryComponents list dynamically and is it a good idea?
P.S. I don't see a point of them adding the entryComponents list
You do not need to add entryComponents to the popup component itself. You need to add entryComponents to the caller of the popup which probably injects the component to the popup
I have an Aurelia application in which I'm trying to build a CMS component. This component will load data from the server and this data mainly contains slug, title and content fields.
I also have several global components defined in my application, and I want to be able to use those components in the server so when I pull that data my CMS component is able to transform/compile those custom elements.
An example would be a tab component. I have the tab component with this structure defined:
<tab-panel>
<tab title="First"></tab>
<tab title="Second"></tab>
</tab-panel>
The CMS component will contain a content property which I use to pass a string like this: '<tab-panel><tab title="First"></tab><tab title="Second"></tab></tab-panel>'
The component needs to compile that string and render it in its view. I've checked the enhance API, but it doesn't worked, at least for me. Any other suggestion to dynamically compile/render custom elements??
Thanks a lot in advance.
I've found the solution. I've used a compose element and InlineViewStrategy and it worked well, the components are shows and binding works as expected.
If your custom elements are registered globally using globalResources you can actually using the TemplatingEngine to dynamically insert content into the DOM and then compile it after-the-fact. This blog post goes into detail in how you can do it.
However, I would use this as a last resort. As is mostly always the case, there are much better ways to do something in Aurelia. Using the <compose> element is a great way to dynamically render content in your Aurelia applications and should always be the first port of call.