Git Product home page Git Product logo

sfcc-devtools's Introduction

Project Support

If you or your company enjoy using this project, please consider supporting my work and joining my discord. 💖

Become a GitHub Sponsor Become a Patreon Sponsor Donate via PayPal Join Discord Community


Logo

Support Browser Interaction with VS Code, Eclipse, and SFCC Business Manager via DevTools Web Inspector.

sfcc-devtool-demo

Features

  • Uses dwMarker HTML Comments
  • Adds new SFCC Side Panel to Elements Panel
  • Open ISML, Pipelines & Controllers in VS Code / Eclipse
  • Open Content Slots & Assets in Business Manager
  • Automatically Open Related Sites by Client ID & Site ID
  • Supports Light & Dark Themes

Installation

Select your browser:

Install Chrome Install Firefox Install Edge

Once Installed:

  1. Open Developer Console / Web Inspector in Browser
  2. Select Elements/Inspector Tab
  3. Select SFCC Tab in Side Panel

sfcc-devtool-enable

Now you're ready to go. In your Elements/Inspector Tab, click on an SFCC comment block, like one of the examples below. This extension will convert the comment into links that allow you to interact with the SFCC resource.

<!-- dwMarker="content" dwContentID="8a6c155cee595360a96c5ac853" -->
<!-- dwMarker="product" dwContentID="8a6c155cee595360a96c5ac853" -->
<!-- dwMarker="decorator" dwTemplateTitle="/default/common/layout/page.isml (app_client_base)" dwTemplateURL="http://localhost:60606/target=/app_client_base/cartridge/templates/default/common/layout/page.isml" -->
<!-- dwMarker="linclude" dwTemplateTitle="/default/components/header/pageHeader.isml (app_client_base)" dwTemplateURL="http://localhost:60606/target=/app_client_base/cartridge/templates/default/components/header/pageHeader.isml" -->
<!-- dwMarker="link" dwPipelineTitle="Login-Show (app_client_base)" dwIsController="true" dwPipelineURL="http://localhost:60606/target=/app_client_base/cartridge/controllers/Login.js&amp;start=Show" -->
<!-- dwMarker="page" dwPipelineTitle="SearchServices-GetPopularSuggestions (app_client_base)" dwPipelineURL="http://localhost:60606/target=/app_client_base/cartridge/controllers/SearchServices.js&amp;start=GetPopularSuggestions" dwIsController="true" dwTemplateTitle="/default/search/suggestionsPopular.isml (app_client_base)" dwTemplateURL="http://localhost:60606/target=/app_client_base/cartridge/templates/default/search/suggestionsPopular.isml" -->
<!-- dwMarker="rinclude" dwPipelineTitle="Internal" dwIsController="false" dwTemplateTitle="/default/slots/category/carousels/carouselRouting.isml (app_client_base)" dwTemplateURL="http://localhost:60606/target=/app_client_base/cartridge/templates/default/slots/category/carousels/carouselRouting.isml" -->
<!-- dwMarker="slot" dwContentID="header-banner" dwContext="global"-->

Troubleshooting

Need Help? Check out or Troubleshooting Page for help with any known issues or report new ones.

Create Issue

About the Author

Peter Schmalfeldt is a Certified Senior Salesforce Commerce Cloud Developer with over 20 years of experience building eCommerce websites, providing everything you need to design, develop & deploy eCommerce applications for Web, Mobile & Desktop platforms.

Disclaimer

The trademarks and product names of Salesforce®, including the mark Salesforce®, are the property of Salesforce.com. SFCC DevOps is not affiliated with Salesforce.com, nor does Salesforce.com sponsor or endorse the SFCC DevOps products or website. The use of the Salesforce® trademark on this project does not indicate an endorsement, recommendation, or business relationship between Salesforce.com and SFCC DevOps.

sfcc-devtools's People

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sfcc-devtools's Issues

Add support for page designer

Support for SFRA sites using Page Designer Components.

  • Currently on site, when you inspect a slot and notice it's a Page Designer component, you are required to go into business manager and search through the growing list of assets. (SFRA doesn't even have the ability to link directly to it in the Toolkit Icon)

The component generated comments have the unique data for the asset.
Typical Page designer component example:
<!-- dwMarker="rinclude" dwPipelineTitle="Internal - Page Designer" dwIsController="false" dwPageId="Component-Asset_Name" -->

Just need the extension to look for that and swap out the url with the one below:
https://${domain}/on/demandware.store/Sites-Site/default/ViewLdsBusinessManagerScreen-PageDesigner/#/edit/page/${dwPageId}

Option to override default linking for "Business Manager"

Overview:

Have an option to set the default linking for "Open in Business Manager".
So instead of being based off whether or not you are viewing staging or production, allow the user to set the link to always open business manager in the staging instance.

Acceptance Criteria:

This will allow the convenience of finding an asset currently in production, and opening it in the staging instance of business manager.

Steps to Duplicate ( required for bug reports ):

  • Have production site open
  • Open inspector and select a dwContentID comment.
  • Clicking the button for "Open in Business Manager" will open the Production version of Business Manager (which is currently an intended feature of the extension).

System Info ( required for bug reports ):

MacOS 10.15.4
Chrome Version 81.0.4044.92

Issue with opening Content Slots

Overview:

When clicking on a Content Slot comment, the correct label will show, but the button is missing.
I'm wondering if it's because of the siteID missing from the comment, so the code below doesn't build the slotURL correctly.
But it should still build the button, so I'm at a loss of what it could be exactly.

if (props.type === 'slot' && props.id && domain && siteID)

content-slot-no-woring

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.