Embedding Scripts and Tags into the Magento 2 Header

What do Google Tag Manager, a Facebook Pixel, and a Twitter Pixel all have in common? They all have to be embedded in the Magento header to function properly, and Magento 2 made that just a little bit harder to do.

To embed a custom script in the Magento header, log into the Magento admin and go to Content >> Configuration(Under Design) >> and select “Edit” next to your store view theme. From here, you’ll see a screen that looks something like this –

 

Click on “HTML Head” and scroll down to the section that says “Scripts & Style Sheets”. From here, embed your code, and save.

Once that’s done, you may need to flush the Magento cache to get it to show up on the frontend. To do that, navigate to System >> Cache Management(under Tools). There you can select all, and then hit “Submit” next to the “Refresh” drop-down.

 

 

 

Quick & Dirty Automated Deployments with Github, Jenkins, and Magento.

This isn’t meant to be an extensive guide but will give you the essentials to start doing automated deployments in Magento with Github & Jenkins.

Setting up Git

Sign up for Github(www.github.com). A personal account will do.

Once you’re signed up, navigate to the home page and click “New Repository”. Add a repository name(no spaces) and a description. I would recommend making the repository private and adding a gitignore. A gitignore file is a way to tell Git to avoid storing certain files in the repository. Files like your local.xml and things in var/cache are specific to a single instance of the code base and shouldn’t be in git. Github actually offers a default “Magento” gitignore file with most of the necessary files ignored.

Once you’ve set up the repository, you should see a button that says “Clone or download”. Copy the https url here and then log into the server that holds your code base. In my case, I’ve got my code on dev and I’m going to be deploying to prod. To keep things clean, I always recommend keeping git configuration in a directory outside of the code base. If your Magento site is in /home/username/public_html, I would create a /home/username/git. Cd into your new git repository and run the following with your url:

Git clone https://github.com/youraccount/reponame.git

That’s going to create a “reponame” directory in the git folder. Inside of reponame(so /home/username/git/reponame) there will be a hidden folder called .git. Copy that folder and the .gitignore file from the same location into your present(git) directory. Go ahead and remove the reponame directory. You should be able to run a git status command now and see the following:

On branch master

Your branch is up-to-date with ‘origin/master’.

nothing to commit, working directory clean

Now, vi the git config directory:

vi ./.git/config

Under the [core] configuration, set the work tree to your Magento directory. That config will look something like this:

[core]

       repositoryformatversion = 0

       filemode = true

       bare = false

       logallrefupdates = true

       worktree = /home/username/public_html

Now, copy your .gitignore file to your Magento directory(/home/username/public_html) and run the “git status” command again.

What you should see is a bunch of Magento files waiting to be added. Now we’re getting somewhere!

Run “git add .”

Now when you run a git status, you should see a bunch of new files listed. Time to commit. Before running a git commit, you’ll have to configure your username and Email for this git directory. Run the following:

Git config –global user.email “youremail@gmail.com

Git config –global user.name “Firstname Lastname”

Now run “git commit” to commit your files. Enter a message to complete the commit.

After the commit, run the following to push your changes to the repository.

Git push origin master

This could take a while as it’s uploading the contents of your Magento store to github.

 

Setting up Jenkins

If you’re on most RHEL based distros, installing Jenkins is as easy as running:

Yum -y install jenkins

Service jenkins start

Chkconfig jenkins on(if you want it to run continuously)

Alright. Your jenkins is installed and running! You should be able to access it at servername:8080

Initially, Jenkins will have no credentials configured. You’re going to want to register an account and then log in. Once registered and logged in, go to Manage Jenkins >> Configure Global Security. Right under “Jenkins’ own user database” uncheck “Allow users to sign up” to stop other users from getting a free pass to your jenkins install. Save the page and let’s move on to installing plugins.

Go to Manage Jenkins >> Manage Plugins >> Available. Install the following:

Git client plugin

Git plugin

Green Balls

Publish over SSH

SSH Credentials Plugin

Jenkins may have to restart during the install. That’s perfectly normal.

Now that you’ve installed your plugins, it’s time to add the server you’re going to deploy to. To add a server, go to Manage Jenkins >> Configure Server. At the bottom you should see “SSH Servers”. Click “Add”. You’ll need to fill out a name for the connection, the hostname, username, and the remote directory you wish to deploy to. Now click “Advanced” and check “Use password authentication, or use a different key” and then enter the SSH password for the remote host. Now you can test and save the remote server.

After you’ve set up the server, go back to the Jenkins home page and click “New Item”. Choose “Freestyle Project” and give it a name. Once you’ve created the project, we’ll get a window to start configuring it. We’re going to be using Git so, under “Source Code Management” select “Git”. Here I would suggest using the full https url to the repository we used earlier and adding your github username & password. Under “Branch specifier” add “*/master”.

Scrolling to the bottom, you should see something called “Send files or execute commands over SSH after the build runs”. Check that checkbox and then select the server you chose earlier. After you’ve set that, the only thing you need to change is “Transfer Set: Source Files”. Add a double star(**) in order to specify you want to copy directories as well as files.

Alright. If all of that has gone well, we’re done! Save the job and then click “Build Now” on the left hand side of your new Jenkins job.

*Note – This works beautifully if you’ve already got a Magento site in place you’re deploying to. If you don’t, you’ll need to fill in all of the essential files(things like local.xml) that won’t be in source control. I recommend getting a Magento install up and running and then deploying to it.

Magento: Complete Guide on How to Add Video Tab on Product Page

Videos are great way to connect with the customers yet it one of the most under-utilized ecommerce strategies. We’ve talked about the importance of product photography in the past, but great product photos are table stakes at this point. If you want to take your ecommerce business to the next level and blow past your competition, you can’t afford to ignore the power of incorporating video into your mix. Product videos can have an incredible ability to increase conversions by better helping people understand your product and provide customers with as much information as possible about the products you offer.

In Magento, it is best to add a product video on product information tab.  The following shows you the steps on how to add a video tab on product page

  • Login to your admin panel
  • Navigate to Catalog -> Attributes -> Manage Attributes

View post on imgur.com

  • Click on “Add New Attribute” button

View post on imgur.com

You will be prompted to a new window as shown below

View post on imgur.com

  • Specify videoID on Attribute Code, select Store View for the scope, and Text Fieldfor Catalog Input Type for Store Owner. Leave the rest of the field as is.
  • Save the attribute
  • Go to Catalog -> Attributes -> Manage Attributes Set

View post on imgur.com

  • Select yourattribute set which you are using for your site
  • UnderUnassigned Attributes you will see videoID item which you should drag into the left column, under General section:

Note: videoID is the attribute code I specified during the Add Attribute step, see Step 4

View post on imgur.com

  • Go to Catalog -> Manage Products

View post on imgur.com

  • Click Save Attribute button
  • Select the Product to edit
  • Input your video URL in theVideo URL field

View post on imgur.com

  • Click the SAVE button

 

For handling the popup you will need to integrate below changes.

  1. Install/Integrate colorbox within your Magento (http://www.jacklmoore.com/colorbox/)
  1. Do minor code changes at below path.

View post on imgur.com

Scaling Intelligently – Sustainable Magento development in an Enterprise Environment Part 2

I’d like to take a moment and talk about scaling intelligently when dealing with Magento in an Enterprise environment. We’ll cover scaling your web servers, database, and administrator properly to avoid some of the headaches involved in running a larger store.

When you start to think about running a website at scale, it’s important to stop and evaluate how you think about an application. Read more

Extensions, Versioning, and Code Review – Sustainable Magento development in an Enterprise Environment

This is the first post in a series of tips on working properly with Magento E-Commerce in an Enterprise environment. Here we’ll define enterprise as an environment that generates more than $30,000 in sales/month and/or requires multiple servers to sustain the existing traffic.

The first element of something being Enterprise is that the stakes are higher than they might be in a smaller store. A problem in production can cost thousands instead of hundreds. Read more